<template>
  <div class="container">
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1000px"
      append-to-body
    >
      <div class="base">
        <div class="base-title">{{ $t("basic_setting") }}</div>
        <div class="base-form">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="120px"
            :disabled="lookView"
          >
            <div slot="header" class="clearfix">
              <span>{{ $t("basic_information") }}</span>
            </div>
            <el-form-item :label="$t('performance_group')">
              <el-input v-model="info.performanceGroupName" disabled></el-input>
            </el-form-item>
            <el-form-item
              :label="$t('performance_appraisal')"
              prop="vacationType"
            >
              <el-input v-model="info.performanceName" disabled></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="base-title">{{ $t("evaluator") }}</div>
        <div class="base-table">
          <div class="base-table-title">
            <span>{{ $t("evaluation_sequence") }}</span>
            <el-radio v-model="radio" label="1">{{
              $t("fixed_evaluation_sequence")
            }}</el-radio>
            <el-radio v-model="radio" label="2">{{
              $t("no_sequence")
            }}</el-radio>
          </div>

          <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="form.detailList"
            :max-height="tableHeight"
          >
            <el-table-column
              :label="$t('approver')"
              align="center"
              prop="nickName"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="$t('action')"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleUp(scope.$index)"
                  :disabled="scope.$index == 0"
                  >{{ $t("move_up") }}</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDown(scope.$index)"
                  :disabled="scope.$index == form.detailList.length - 1"
                  >{{ $t("move_down") }}</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDelete(scope.row, scope.$index)"
                  >{{ $t("delete") }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="zhi" @click="handleAdds">
            <i class="el-icon-plus"></i>
            <span>{{ $t("add") }}</span>
          </div>
        </div>

        <div class="base-title">{{ $t("questions_of_appraisal") }}</div>
        <div class="base-table base-table-bba">
          <el-table ref="multipleTable" v-loading="loading" :data="jixiaoTimu" border>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="index"
              :label="$t('id_number')"
              min-width="40"
              :formatter="formatter"
              align="center"
            >
            </el-table-column>
            <el-table-column
              :label="$t('question_list')"
              align="center"
              prop="performanceTopic"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="$t('highest_score')"
              align="center"
              prop="highestScore"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="$t('lowest_score')"
              align="center"
              prop="lowestScore"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="$t('percentage_of_total_score')"
              align="center"
              prop="percentage"
              :show-overflow-tooltip="true"
            />
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{
          $t("confirm")
        }}</el-button>
        <el-button @click="cancel">{{ $t("cancel") }}</el-button>
      </div>
    </el-dialog>
    <createdPeo
      ref="showTips"
      @handleChoosePeople="handleChoosePeople"
    ></createdPeo>
  </div>
</template>

<script>
import {
  jixiaogroupList,
  getGroup,
  getTable,
  performance,
  performanceInfo,
} from "@/api/custom/employerList";
import createdPeo from "@/views/custom/performance/createdPeo.vue";
export default {
  components: {
    createdPeo,
  },
  props: {
    detailParams: Object,
  },
  name: "Add",
  data() {
    return {
      loading: false,
      lookView: false,
      radio: "1",
      open: false,
      title: "",
      value: "",
      form: {
        detailList: [],
      },
      rules: {},

      pageSize: 10,
      page: 1,
      jixiaozuList: [],
      jixiaobiaoList: [],
      jixiaoTimu: [],
      info: {},
    };
  },
  created() {
    this.getjixiaogroupList();
  },
  methods: {
    // 获取审评人
    getperformanceInfo() {
      this.form.detailList = [];
      performanceInfo(this.info.performanceEmployerConfigId).then((res) => {
        if (res.code == 200) {
          if (res.data.reviewerList && res.data.reviewerList.length) {
            this.form.detailList = res.data.reviewerList;
          } else {
            let find1 = res.data.reviewerList.find(
              (item) => item.reviewerType == 1
            );
            let find2 = res.data.reviewerList.find(
              (item) => item.reviewerType == 2
            );
            if (res.data.performance.isNeedSelfAssessment == 1 && !find1) {
              this.form.detailList.push({
                nickName: this.$t("self_assessment"),
                reviewerType: "1",
              });
            }
            if (
              res.data.performance.isNeedDirectSupervisorReview == 1 &&
              !find2
            ) {
              this.form.detailList.push({
                nickName: this.$t("superior_person_charge"),
                reviewerType: "2",
              });
            }
            if (res.data.reviewerList && res.data.reviewerList.length) {
              this.form.detailList = [
                ...this.form.detailList,
                ...res.data.reviewerList,
              ];
            }
          }

          this.$forceUpdate();
        }
      });
    },
    // 绩效组列表
    getjixiaogroupList() {
      jixiaogroupList().then((res) => {
        this.jixiaozuList = res.rows;
      });
    },
    handleChangejixiao(id) {
      getGroup(id).then((res) => {
        if (
          res.data &&
          res.data.performanceTableList &&
          res.data.performanceTableList.length
        ) {
          this.jixiaobiaoList = res.data.performanceTableList;
        }
      });
    },
    handleChangejixiaoBiao(item) {
      getTable(item).then((res) => {
        if (res.data && res.data.topicList && res.data.topicList.length) {
          this.jixiaoTimu = res.data.topicList;
        }
      });
    },
    formatter(row, column, cellValue, index) {
      //放回索引值
      return this.pageSize * (this.page - 1) + 1 + index;
    },
    showDateschedule(detailParams) {
      this.info = {};
      this.open = true;
      this.title = detailParams.title;
      this.info = detailParams.item;
      this.getperformanceInfo();
      this.handleChangejixiaoBiao(this.info.performanceId);
    },
    submitForm() {
      performance({
        performanceEmployerConfigId: this.info.performanceEmployerConfigId,
        reviewerList: this.form.detailList.map((item) => {
          if (item.userId) {
            item.reviewerType = "3";
          }
          return item;
        }),
        evaluationSequence: Number(this.radio),
      }).then((res) => {
        this.open = false;
        this.$emit("handleSuccess");
      });
    },
    cancel() {
      this.form = {
        // 绩效组id
        jixiaoid: "",
        // 选择绩效表
        jixiaobiaoid: "",
        // 审批人
        detailList: [],
      };
      this.jixiaozuList = [];
      this.jixiaobiaoList = [];
      this.jixiaoTimu = [];
      this.open = false;
    },

    // 互换位置
    swapArray(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },
    // 上移
    handleUp(index) {
      this.swapArray(this.form.detailList, index, index - 1);
    },
    // 下移
    handleDown(index) {
      this.swapArray(this.form.detailList, index, index + 1);
    },

    handleAdds() {
      this.$refs.showTips.handleAddPosition(this.info);
    },
    // /** 删除按钮操作 */
    handleDelete(row, index) {
      this.$modal
        .confirm(this.$t("delete_data"))
        .then(() => {
          this.form.detailList.splice(index, 1);
          this.$modal.msgSuccess(this.$t("operation_successful"));
        })
        .catch(() => {});
    },
    handleChoosePeople(e) {
      this.form.detailList.push({
        id: e.id,
        userId: e.id,
        nickName: e.auditor,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.base {
  &-title {
    font-size: 20px;
    font-weight: bold;
  }

  &-form {
    width: 66%;
    margin: 0 auto;
    margin-top: 20px;
  }

  &-table {
    width: 60%;
    margin: 20px auto;

    &-title {
      margin-bottom: 20px;
    }

    .zhi {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      border: 2px dashed #cccccc;
      margin: 20px auto;
      cursor: pointer;
    }

    &-bba {
      width: 100%;
    }
  }
}
</style>
